<template>
  <div class="menu-node" :class="{ 'menu-node-web': equ === 'pc' }">
    <div class="content">
      <child v-for="(x, i) in nodeData" :key="x.id" v-model:node="nodeData[i]" :index="i" :type="type" />
    </div>
  </div>
</template>

<script lang="ts" name="MenuNode" setup>
import { equ } from '../../../../package-env'
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['update:modelValue', 'nodeClick', 'change'])

const defCfg = { open: true }

const current = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
})

const nodeData = computed(() => {
  const fn = (arr) => {
    const res = reactive([])
    arr.forEach((n) => {
      const o = { ...n, ...defCfg }
      if (n.children && n.children.length > 0) o.children = fn(n.children)
      if (n.is_catalogue) {
        res.push(o)
      }
    })
    return res
  }
  return fn(props.data)
})

const nodeClick = (node?) => {
  emit('nodeClick', node)
}

provide('current', current)
provide('nodeClick', nodeClick)

</script>

<style lang="scss" scoped>
.menu-node {
  &-web {
    .content {
      padding-left: 20px;
    }
  }
}
</style>


